<template>
  <div style="background-color: #eee;">
    <div class="asheng-hot-title" style="height:auto">
      <table class="asheng-hot-title-table">
        <tr>
          <td style="width: 60px;"></td>
          <td style="font-size: 16px;color:#3c85ed;">精选套餐({{ hotNum }})</td>
          <td style="width: 60px;color: #999;" @click="closeHot">关闭</td>
        </tr>
      </table>
      <div class="topSelectSearch" style="margin-top:0px">
        <van-search v-model="queryPara.goodName" clearable show-action placeholder="请输入套餐名称">
          <template #action>
            <div class="search-button" @click="onClickSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <div style="height: 103px;width: 100%;"></div>
    <!-- <div style="font-size: 14px;width:94%;margin-left: 3%;color: red;margin-bottom: -10px;">*点击产品LOGO或名称，完成热门产品添加和移除。
        </div> -->
    <div class="asheng-good-list" v-if="goodArray != null && goodArray.length > 0">
      <div class="asheng-good-list-item" v-for="(item, index) in goodArray" v-bind:key="item.id">
        <div style="display: flex;widht:100%">
          <!-- <div  style="width:20px;" class="asheng-hot-icon"></div> -->
          <div style="width:calc(100% - 100px);"><van-icon v-if="item.isHot === 1" name="fire" color="white" style="margin-right: 3px;color:red;font-weight: bold;" />{{ item.goodName }}</div>
          <div style="width:100px;text-align:right;">
            <van-button plain hairline type="primary" size="small" style="float: right;font-size: 14px;" @click="onClickChangeHot(item, index)">{{ item.isHot === 1? '取消标签' : '加入标签' }}</van-button>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty description="暂无相关数据" />
    </div>
  </div>
</template>
<script>
import { getCountHot } from '@/api/admin/setting'
import { listGoodinfo, updateHot } from '@/api/admin/goodinfo'
import { showToast } from 'vant'
export default {
  name: 'settingHotDlglog',
  components: {},
  data() {
    return {
      hotNum: 0,
      queryPara: {
        pageNum: 1,
        pageSize: 500,
        status: 100,
        goodName: '',
      },
      goodArray: [],
    }
  },
  created() {
    this.initCurrPageData()
  },
  methods: {
    initCurrPageData() {
      listGoodinfo(this.queryPara).then((res) => {
        if (res.code === 200) {
          this.goodArray = res.rows
        }
      })

      this.countHotNum()
    },
    onClickSearch() {
      this.queryPara.pageNum = 1
      this.initCurrPageData()
    },
    closeHot() {
      this.$emit('closeHot')
    },
    countHotNum() {
      getCountHot().then((res) => {
        if (res.code == 200) {
          this.hotNum = res.data
        }
      })
    },
    onClickChangeHot(item, index) {
      let isHot = 0
      if (item.isHot != 1) {
        isHot = 1
      }

      updateHot(item.id, isHot).then((res) => {
        if (res.code == 200) {
          this.goodArray[index].isHot = isHot
          if (isHot === 1) {
            showToast('添加成功')
            this.hotNum = this.hotNum + 1
          } else {
            showToast('移除成功')
            this.hotNum = this.hotNum - 1
          }
        } else {
          showToast(res.msg)
        }
      })
    },
  },
}
</script>
<style scoped>
.asheng-hot-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  text-align: center;
  position: fixed;
  width: 100%;
  background-color: white;
  border-radius: 15px 15px 0px 0px;
  overflow: hidden;
  z-index: 999999;
}

.asheng-hot-title-table {
  width: 100%;
}

.asheng-good-list {
  min-height: 200px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.asheng-good-list-item {
  width: 100%;
  padding: 10px;
  background: #fff;
  line-height: 18px;
  border-bottom: 1px solid #f1f1f1;
}

.asheng-good-list-item img {
  width: 100%;
}

.asheng-good-name {
  width: 94%;
  margin-left: 3%;
  margin-top: 3px;
  margin-bottom: 10px;
  font-size: 14px;
}

.asheng-hot-icon {
  position: absolute;
  background-color: red;
  padding: 3px 5px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0px 0px 5px 5px white;
  border-radius: 0px 10px 10px 0px;
}
/deep/ .van-search {
  background: none;
  padding: 0;
}
/deep/ .van-icon-search {
  color: #3682ffff;
}
/deep/ .van-search__action {
  color: #3682ffff;
}
/deep/ .van-field__control {
  color: #3682ffff;
}
/deep/ .van-field__control::-webkit-input-placeholder {
  color: #3682ffff;
}
</style>